<template>
  <div class="task_form_creat">
    <el-dialog
      title="发布任务"
      :visible="visible"
      :before-close="handleClose"
      append-to-body
      width="60%"
      loading
    >
      <el-form ref="form" label-width="80px">
        <el-form-item label="接受人">
          <el-select v-model="value.people" placeholder="请选择接受人" multiple clearable value-key="id" filterable>
            <el-option v-for="(item,index) in userList" :key="index" :label="item.true_name" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="item in renderData"
          :key="item.dataIndex"
          :label="item.title"
        >
          <el-input
            v-model="item.myValue"
            placeholder="请输入内容"
            autosize
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleOk">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  findModelFormTableInfoByModelId,
  findTableHeader,
  submitModel
} from '@/api/dynamicInterface';

export default {
  name: 'TaskFormCreat',
  props: {
    value: {
      default: () => ({}),
      type: Object
    },
    userList: {
      default: () => ([]),
      type: Array
    },

    modelId: {
      type: [String, Number],
      default: ''
    },

    visible: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      modelData: {},
      mbId: '',
      loading: true,
      renderData: []
    };
  },

  watch: {
    visible: {
      handler: function(v) {
        if (v) {
          this.init();
        }
      }
    }
  },
  methods: {
    init() {
      this.clear();
      this.getData();
    },

    clear() {
      this.modelData = {};
      this.renderData = [];
      this.loading = true;
    },

    getData() {
      const { modelId } = this;
      findModelFormTableInfoByModelId({ modelId }).then(res => {
        const { success, data } = res;
        if (success) {
          const { children } = data;
          const modelContent = children.find(o => o.tableName.includes('模板内容'));
          const tableIds = modelContent && modelContent.id;
          const spContent = children.find(o => o.tableName.includes('审批内容'));
          const spTableId = spContent && spContent.id; // 暂时用不上

          spTableId;
          if (tableIds) {
            this.mbId = tableIds;
            this.getTableHeader(tableIds);
          } else {
            this.$message.erroe('获取模板内容失败');
          }
        }
      });
    },

    getTableHeader(tableId) {
      findTableHeader({ tableId }).then(res => {
        const { data, success } = res;
        if (success) {
          // this.$message.success(res.message);
          data.forEach(item => {
            item.myValue = item.defaultValue || '';
          });

          const data1 = data.filter(item => item.status === 0);
          this.renderData = data1;
        } else {
          this.$message.error(res.message);
        }

        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
    },

    handleOk() {
      const { mbId, value, renderData, modelId } = this;
      const { people } = value;
      const requestData = {
        modelId,
        toUsers: people.map(u => u.id),
        bodyData: [
          {
            data: [
              renderData.reduce((p, c) => {
                p[c.dataIndex] = c.myValue;
                return p;
              }, {})
            ],

            tableId: mbId
          }
        ]
      };

      if (people.length) {
        submitModel(requestData).then(res => {
          const { success, message } = res;
          if (success) {
            this.$message.success(message);
            setTimeout(() => {
              this.handleClose();
            }, 500);
          }
        });
      } else {
        this.$message.warning('请至少选择一位接受人');
      }
    },

    handleClose() {
      this.$emit('update:visible', false);
    }
  }

};
</script>

<style>

</style>
